<template>
    <div>
        <el-form :inline="true">
            <el-form-item>
                <el-button type="success" @click="OpenAddMenuDialog()" icon="el-icon-plus">添加菜单</el-button>
            </el-form-item>
        </el-form>
        <!-- 使用dialog对话框 =>新增菜单 -->
        <el-dialog title="新增菜单" :visible.sync="dialogFormVisible1">
        <AddMenView ref="AddMenView" @onAddMenuClose="onAddMenuClose()"></AddMenView>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addMenu()">确 定</el-button>
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        </div>
        </el-dialog>
        <!-- 列表数据 -->
        <el-table :data="MenuList" row-key="menuId" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column label="菜单名称" prop="menuName" width="180px"></el-table-column>
            <el-table-column label="菜单类型" prop="menuType">
                <template slot-scope="scope">
                    <span v-if="scope.row.menuType==1">目录</span>
                    <span v-if="scope.row.menuType==2">菜单</span>
                    <span v-if="scope.row.menuType==3">按钮</span>
                </template>
            </el-table-column>
            <el-table-column label="菜单路由 (路由路径)" prop="menuRoute" width="150px"></el-table-column>        
            <el-table-column label="路由名称" prop="routeName" ></el-table-column> 
            <el-table-column label="组件路径" prop="component" width="210px"> </el-table-column>    
            <el-table-column label="菜单图标" prop="icon"></el-table-column>
            <el-table-column label="菜单接口 (Api接口)" prop="menuApi"  width="210px"></el-table-column>      
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  type="primary" icon="el-icon-edit" plain circle @click="OpenEditMenuDialog(scope.row.menuId)"></el-button>
                    <el-button  type="danger" icon="el-icon-delete" plain circle @click="DeleteMenu(scope.row.menuId)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 使用dialog对话框 =>编辑菜单 -->
        <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible2" style="width:300pxheight:300px" >
            <EditMenuView ref="EditMenuView"
             @onUpdateMenuClose="onUpdateMenuClose()"
            :menuId="menuId" 
            :key="new Date().getTime()">
            </EditMenuView>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editMenu()">确 定</el-button>
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>           
            </div>
        </el-dialog>
    </div>
</template>
<script>
import AddMenView from "../Menu/MenuAdd.vue";
import EditMenuView from "../Menu/MenuEdit.vue";

import {getMenu} from "../../api/menu.js";
import {MenuDelJS} from "../../api/menu.js";
export default {
    components:{
       AddMenView,
       EditMenuView,
    },
    data() {
        return {
            dialogFormVisible1: false,
            dialogFormVisible2:false,
            MenuList:[],
            menuId:0,
        }
    },
    methods: {
        //【打开添加菜单的对话框】
        OpenAddMenuDialog(){
            this.dialogFormVisible1=true;
        }, 
        //【点击对话框的里面的添加按钮】，父组件传值调用添加页面的菜单的添加方法  
        addMenu(){
            this.$refs.AddMenView.AddMenuInfo('form');
        },
        //【关闭添加菜单的对话框】
        onAddMenuClose(){
            this.dialogFormVisible1=false;
        }, 
        //【菜单列表】
        GetMenuInfo(){
            getMenu().then(res=>{
                this.MenuList= res.data.data;
            });
        },
        //【打开编辑菜单对话框】
        OpenEditMenuDialog(id){
             this.menuId= id;
             this.dialogFormVisible2=true;           
        },
        //【父组件传值  到  子组件页面  调用  菜单编辑方法】
        editMenu(){
            this.$refs.EditMenuView.EditMenuInfo('form');
        },
        //【关闭修改菜单的对话框】
        onUpdateMenuClose(){
            this.dialogFormVisible2=false;  
        },
        //【菜单单个删除】
        DeleteMenu(menuId){
            this.$confirm("确定要删除菜单吗？",{confirmButtonText:"确定",cancelButtonText:"取消",type:"waring"})
            .then(()=>{              
                MenuDelJS(menuId).then((res) => {
                    if (res.data.result == 200) {
                        this.$message({ type: "success", message: res.data.message });
                        this.GetMenuInfo(); //刷新页面
                    } else {
                        this.$message({ type: "error", message: res.data.message });
                        this.GetMenuInfo(); //刷新页面
                    }
                });             
            }).catch(()=>{
                this.$message({type:"info",duration:800,message:"已取消删除！"});
            });
        },
    },
    created() {
        this.GetMenuInfo();
    },
}
</script>
<style>
    .el-form {
         line-height: 10px;
    }
    .el-table{
        line-height: 30px;
    }
</style>
